<template>
  <div class="dishitem" :class="{'active': active }">
    <div class="value">
     <span class="content">{{value}}</span>
    </div>
    <div class="money" :class="{'show':showMoney}">
      <span class="content">￥{{money}}</span>
    </div>
  </div>
</template>

<script setup>
  import { ref} from 'vue' 
   //自定义显式声明属性
  const props =defineProps({
    value: String,
    money: Number,
    active: false
  })
  
  //计算属性
  const showMoney = computed(() => {
    return props.money > 0 
  })
   
</script>

<style scoped="scoped">

.dishitem{
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #c1c3d0;
  margin-right: 5px;
}

.dishitem .value{
  float: left;
}

.dishitem .money{
  float: left;
  border-left: 1px solid #c1c3d0;
  color: #db6159;
  display: none;
}


.dishitem .show{
  display: block
}

.dishitem .content{
  padding: 0 4px;
  display: inline-block;
}

.dishitem.active{
  background-color: #fffbf0;
   border: 1px solid #e6b63c;
}

.dishitem.active .value{
  color: #e6b63c;
}
.dishitem.active .money{
  float: left;
  border-left: 1px solid #e6b63c;
}
</style>
